<template>
  <basic-dialog
    title="新增自定义属性"
    width="55%"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleClose"
  >
    <div>
      <div>在所选择的SPU下增加自定义属性：</div>
      <el-row type="flex">
        <el-input class="attr_input" v-model="inputValue" />
        <el-button class="attr_add_btn" type="primary" @click="handleAdd">添加</el-button>
        <el-button class="attr_add_btn" type="primary" @click="handleConfirm">确定</el-button>
      </el-row>
      <el-divider content-position="center">已添加自定义属性</el-divider>
      <el-row class="attr_tag_wrap">
        <el-tag
          v-for="item in attrList"
          :key="item.uuid"
          closable
          :disable-transitions="false"
          @close="handleRemoveAttr(item.uuid)">
          {{ item.value }}
        </el-tag>
      </el-row>
      <el-divider content-position="center">所选SPU信息</el-divider>
      <el-row>
        <SkusTable
          :maxTableHeight="300"
          :dataSource="tableData"
          :columns="tableColumns"
        />
      </el-row>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SkusTable from '@/components/skusTable';
import { generateUuid } from '@/utils/bizUtils';
export default {
  components: {
    BasicDialog,
    SkusTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    allTableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      inputValue: '',
      attrList: [],
      tableColumns: [
        { title: '商品名称', key: 'productName' },
        { title: 'SPU编码', key: 'spuNo' },
      ]
    }
  },
  computed: {
    tableData () {
      return _.uniqBy(this.dataSource, 'spuNo')
    }
  },
  methods: {
    validateAdd () {
      if (!this.inputValue) {
        this.$message.warning('自定义属性不能为空!')
        return true
      }
      const addAttrs = this.attrList.map(item => item.value)
      if (addAttrs.includes(this.inputValue)) {
        this.$message.warning('请勿重复添加!')
        return true
      }
      const curSpuNos = this.dataSource.map(item => item.spuNo)
      const isExistAttr = this.allTableData.some(item => {
        const existCurSpu = curSpuNos.includes(item.spuNo)
        const curSpuAttrNames = this.allTableData
          .filter(row => row.spuNo == item.spuNo)
          .map(item => item.attrName)
        return existCurSpu && curSpuAttrNames.includes(this.inputValue)
      })
      if (isExistAttr) {
        this.$message.warning('所选SPU中已存在该自定义属性!')
        return true
      }
      return false
    },
    // 添加自定义属性
    handleAdd () {
      const cannotAdd = this.validateAdd()
      if (cannotAdd) return
      const uuid = generateUuid()
      this.attrList.push({ uuid, value: this.inputValue })
      this.inputValue = ''
    },
    // 确定添加属性
    handleConfirm () {
      const hasNoAddAttrs = this.attrList.length == 0
      if (hasNoAddAttrs) return this.$message.warning('请添加属性名称！')
      this.$emit('getAddAttrs', this.attrList.map(item => item.value))
      this.handleClose()
      this.clearDialogState()
    },
    // 移除已添加自定义属性
    handleRemoveAttr (uuid) {
      const index = this.attrList.findIndex(item => item.uuid == uuid)
      this.attrList.splice(index, 1)
    },
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 清空弹框状态
    clearDialogState () {
      this.inputValue = ''
      this.attrList = []
    }
  }
}
</script>
<style lang="less" scoped>
.attr_input {
  width: 30%;
}
.attr_add_btn {
  margin-left: 10px;
}
.margin_top {
  margin-top: 10px;
}
.attr_tag_wrap {
  /deep/ .el-tag {
    margin: 10px 10px 0 0;
  }
}
</style>
